<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/9/25
  Time: 17:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
    <style>
        .el-container {
            height: 100%;
        }

        iframe {
            border: none;
        }

        .el-button {
            border: none;
            background: none;
            width: 200px;
            height: 50px;
            position: relative;
            left: -20px;
        }


        html, body, #app {
            margin: 0px;
            padding: 0px;
        }

        .el-container {
            background-color: #2b2b2b;
            color: #2b2b2b;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #393d49;
            color: #333;
            text-align: center;
            line-height: 1000px;
        }

        .el-main {
            background-color: #f8f7e7;
            color: #2b2b2b;
            text-align: center;
            line-height: 100px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /*去除a标签的样式*/
        a {
            color: inherit; /* 继承父元素的文本颜色 */
            text-decoration: none;
        }

        #img1 {
            position: absolute;
            left: 0;
        }
        .head{
            color: whitesmoke;
            position: relative;
            left: -750px;
            font-size: 45px;
            font-family: Arial,sans-serif;
            font-style: italic;
        }
    </style>
</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <div style="width: 100%;height: 100% ; background-color: #2b2b2b">
                <div id="img1" style="width: 199px ;height: 58px">
                    <img src="/images/Snipaste.png" style="width: 199px ;height: 58px">
                </div>
                <div style="float: right;margin-right: 10px ; background-color: #2b2b2b">
                    <span class="head">{{head1}}</span>
                    <el-dropdown>
                     <span>
                          <el-avatar :src="user.url"></el-avatar>
                     </span>
                        <span class="el-dropdown-link">
                        {{user.staffname}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <i @click="jbxx()">基本信息</i>
                            </el-dropdown-item>
                            <el-dropdown-item><i @click="xgmm()">修改密码</i></el-dropdown-item>
                            <el-dropdown-item><i><a href="/view/tuichu">退出登录</a></i></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#393d49"
                        text-color="#fff"
                        :unique-opened="true"

                >
                    <el-submenu v-for="item in leftmenus" :index="item.mid+''">
                        <template slot="title">
                            <span>{{item.mname}}</span>
                        </template>
                        <el-menu background-color="#b3c0d1"
                                 text-color="#fff">
                            <el-menu-item v-for="child in item.children" :index="child.mid+''">
                                <el-button @click="tz(child)">
                                    {{child.mname}}
                                </el-button>
                            </el-menu-item>
                        </el-menu>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                    >
                        <iframe :src="item.content" width="100%" height="100%"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            user: {},
            head1: '',
            leftmenus: [],
            editableTabsValue: '0',
            editableTabs: [{
                title: '首页',
                name: '0',
                content: '/view/home',
            }],
            tabIndex: 0
        },
        created() {
            //获取当前用户的信息.
            this.userinfo();
            //获取左侧菜单
            this.leftMenu();
        },
        methods: {
            userinfo() {
                axios.get("/staff/info").then(function (resp) {
                    app.user = resp.data.data;
                })
                axios.post("/home/head2").then(function (resp) {
                    app.head1 = resp.data.data.branchname
                    console.log(app.head1,"--------------")
                })
            },
            //获取左侧菜单
            leftMenu() {
                axios.get("/menu/leftMenu").then(function (resp) {
                    app.leftmenus = resp.data.data.data;
                })
            },
            tz(child) {
                let newTabName = ++this.tabIndex + '';
                for (let i = 0; i < app.editableTabs.length; i++) {
                    if (app.editableTabs[i].name === child.mname) {
                        this.editableTabsValue = child.mname;
                        return;
                    }
                }
                this.editableTabs.push({
                    title: child.mname,
                    name: child.mname,
                    content: child.murl
                });
                this.editableTabsValue = child.mname;

            },
            jbxx() {
                let newTabName = ++this.tabIndex + '';
                for (let i = 0; i < app.editableTabs.length; i++) {
                    if (app.editableTabs[i].name === "基本信息") {
                        this.editableTabsValue = "基本信息";
                        return;
                    }
                }
                this.editableTabs.push({
                    title: '基本信息',
                    name: '基本信息',
                    content: '/view/jbxx'
                });
                this.editableTabsValue = '基本信息';

            },
            xgmm() {
                let newTabName = ++this.tabIndex + '';
                for (let i = 0; i < app.editableTabs.length; i++) {
                    if (app.editableTabs[i].name === "修改密码") {
                        this.editableTabsValue = "修改密码";
                        return;
                    }
                }
                this.editableTabs.push({
                    title: '修改密码',
                    name: '修改密码',
                    content: '/view/xgmm'
                });
                this.editableTabsValue = '修改密码';
            },
            tcdl() {
                let newTabName = ++this.tabIndex + '';
                for (let i = 0; i < app.editableTabs.length; i++) {
                    if (app.editableTabs[i].name === "退出登录") {
                        this.editableTabsValue = "退出登录";
                        return;
                    }
                }
                this.editableTabs.push({
                    title: '退出登录',
                    name: '退出登录',
                    content: '/view/tcdl'
                });
                this.editableTabsValue = '退出登录';
            },

            removeTab(targetName) {
                console.log(targetName)
                if (targetName == 0) {
                    return
                }
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    })
</script>
</html>
